<template>
    <div v-loading.fullscreen.lock='loading'>
        <div class='container'>
            <el-tabs v-model='activeName1' @tab-click='handleClick'>
                <el-tab-pane :label='item.factoryName' :name='item.id' v-for='(item,index) in list' :key='index'>
                </el-tab-pane>
                <!--        <tablelist :activeName1 = "activeName1"></tablelist>-->
                <div class='leftlabel'></div>
                <div class='labeltitle'>生产数据统计</div>
                <div class='sjcontent' v-if='switchHeadTab=="生产系统"'>
                    <div class='sjcontainer borderrioght'>
                        <img class='sjimg' src='../../assets/配方颗粒@2x.png' alt=''>
                        <div class='sjtitle'>配方颗粒</div>
                        <div class='sjnum'>
                            {{ pfkl }}万袋
                        </div>
                    </div>
                    <div class='sjcontainer borderrioght'>
                        <img class='sjimg' src='../../assets/配方颗粒.png' alt=''>
                        <div class='sjtitle'>配方颗粒（颗粒）</div>
                        <div class='sjnum'>
                            {{ pfklkl }}kg
                        </div>
                    </div>
                    <div class='sjcontainer borderrioght'>
                        <img class='sjimg' src='../../assets/浸膏粉@2x.png' alt=''>
                        <div class='sjtitle'>配方颗粒（浸膏粉）</div>
                        <div class='sjnum'>
                            {{ jgf }}kg
                        </div>
                    </div>
                    <div class='sjcontainer borderrioght' style='width:16.4%;'>
                        <img class='sjimg' src='../../assets/提取饮片@2x.png' alt=''>
                        <div class='sjtitle'>中药饮片</div>
                        <div class='sjnum'>{{ zyyp }}kg</div>
                    </div>
                    <div class='sjcontainer borderrioght' style='width:16.4%;'>
                        <img class='sjimg' src='../../assets/ddddd1.png' alt=''>
                        <div class='sjtitle'>中药材</div>
                        <div class='sjnum'>{{ zyc }}kg</div>
                    </div>
                    <div class='sjcontainer' style='width:16.4%;'>
                        <img class='sjimg' src='../../assets/fllog.png' alt=''>
                        <div class='sjtitle'>辅料</div>
                        <div class='sjnum'>{{ fl }}kg</div>
                    </div>
                </div>
                <div class='sjcontent' v-if='switchHeadTab=="中药饮片"'>
                    <div class='sjcontainer borderrioght' v-for='(item,index) in checkList' :key='index'>
                        <img class='sjimg' :src='item.icon' alt=''>
                        <div class='sjtitle'>{{ item.materialType }}</div>
                        <div class='sjnum'>{{ item.numCnt }}{{ item.unit }}</div>
                    </div>
                </div>
            </el-tabs>
        </div>
        <div class='container' style='margin-top: 20px;height: 150px' v-if='switchHeadTab=="生产系统"'>
            <div class='leftlabel'></div>
            <div class='labeltitle'>检验及时率</div>
            <div style='float: right;margin-right: 13px'>
                <el-date-picker
                    v-model='selectTime'
                    type='daterange'
                    @change='timePickerChange'
                    range-separator='至'
                    start-placeholder='开始日期'
                    end-placeholder='结束日期'>
                </el-date-picker>
            </div>
            <div class='sjcontent' style='margin-top: 30px'>
                <div class='sjcontainer borderrioght' v-for='(item,i) in checkList' :key='i' v-if='item.icon'>
                    <img class='sjimg' :src='item.icon' alt=''>
                    <div class='sjtitle'>{{ item.materialType }}</div>
                    <div class='sjnum'>
                        {{ item.rate }}
                    </div>
                </div>
            </div>
        </div>
        <div class='container' :style='{height:switchHeadTab=="中药饮片"?"auto":"280px"}' style='margin-top: 20px;'>
            <div class='leftlabel'></div>
            <div class='labeltitle'>生产档案统计</div>
            <div :style='{display:switchHeadTab=="中药饮片"?"flex":""}'>
                <div :style='{width:switchHeadTab=="中药饮片"?"33%":"20%"}'
                     style='background: rgba(244, 249, 255, 1);height:100px;margin: 20px;position: relative;display: inline-block;vertical-align: middle'>
                    <img src='../../assets/ddddd1.png'
                         style='width: 50px;height:50px;position: absolute;top:20%;left:10%;'>
                    <div style='position: absolute;left: 35%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>名称</div>
                        <div style='font-size: 15px;margin-top: 10px'>中药材</div>
                    </div>
                    <div style='position: absolute;left: 66%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>品种数量</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ zycnum }}</div>
                    </div>
                </div>
                <div :style='{width:switchHeadTab=="中药饮片"?"33%":"20%"}'
                     style='background: rgba(244, 249, 255, 1);height:100px;margin: 20px;position: relative;display: inline-block;vertical-align: middle'>
                    <img src='../../assets/fllog.png'
                         style='width: 50px;height:50px;position: absolute;top:20%;left:10%;'>
                    <div style='position: absolute;left: 35%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>名称</div>
                        <div style='font-size: 15px;margin-top: 10px'>辅料</div>
                    </div>
                    <div style='position: absolute;left: 66%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>品种数量</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ flnum }}</div>
                    </div>
                </div>
                <div :style='{width:switchHeadTab=="中药饮片"?"33%":"50%"}'
                     style='background: rgba(244, 249, 255, 1);height:100px;margin: 20px;position: relative;display: inline-block;vertical-align: middle'>
                    <img :style='{left:switchHeadTab=="中药饮片"?"10%":"4%"}' src='../../assets/配方颗粒@2x.png'
                         style='width: 50px;height:50px;position: absolute;top:20%;left:4%;'>
                    <div :style='{left:switchHeadTab=="中药饮片"?"35%":"13%"}'
                         style='position: absolute;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>名称</div>
                        <div style='font-size: 15px;margin-top: 10px'>
                            {{ switchHeadTab == '生产系统' ? '中药配方颗粒' : switchHeadTab }}
                        </div>
                    </div>
                    <div :style='{left:switchHeadTab=="中药饮片"?"60%":"30%"}'
                         style='position: absolute;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>品种数量</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ zyypnum }}</div>
                    </div>
                    <div style='position: absolute;left: 47%;width: 20%;text-align: center;top: 20%'
                         v-if='switchHeadTab=="生产系统"'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>国标</div>
                        <div style='font-size: 15px;margin-top: 10px'>C60：{{ gc60 }}种</div>
                        <div style='font-size: 15px;margin-top: 5px'>C70：{{ gc70 }}种</div>
                    </div>
                    <div style='position: absolute;left: 68%;width: 20%;text-align: center;top: 20%'
                         v-if='switchHeadTab=="生产系统"'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>省标</div>
                        <div style='font-size: 15px;margin-top: 10px'>C80：{{ sc60 }}种</div>
                        <div style='font-size: 15px;margin-top: 5px'>C90：{{ sc70 }}种</div>
                    </div>
                </div>
                <div v-if='switchHeadTab=="生产系统"'
                     style='width: 42.5%;background: rgba(244, 249, 255, 1);height:100px;margin: 20px;position: relative;display: inline-block;vertical-align: middle;margin-top:0;'>
                    <img src='../../assets/上市备案号.png'
                         style='width: 50px;height:50px;position: absolute;top:20%;left:4%;'>
                    <div style='position: absolute;left: 13%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>上市备案号</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[0].all }}</div>
                    </div>
                    <div style='position: absolute;left: 35%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>国标</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[0].gb }}</div>
                    </div>
                    <div style='position: absolute;left: 57%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>省标</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[0].sb }}</div>
                    </div>
                    <div style='position: absolute;left: 75%;width: 20%;text-align: center;top: 20%;cursor: pointer;'
                         @click='gossbah'>
                        <img src='../../assets/xq.png' style='width: 20px'>
                        <div style='font-size: 12px;margin-top: 0px;color: rgba(64, 158, 255, 1)'>详情</div>
                    </div>
                </div>
                <div v-if='switchHeadTab=="生产系统"'
                     style='width: 50%;background: rgba(244, 249, 255, 1);height:100px;margin: 20px;position: relative;display: inline-block;vertical-align: middle;margin-top: 0'>
                    <img src='../../assets/销售备案号.png'
                         style='width: 50px;height:50px;position: absolute;top:20%;left:4%;'>
                    <div style='position: absolute;left: 13%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>销售备案号</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[1].all }}</div>
                    </div>
                    <div style='position: absolute;left: 35%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>国标</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[1].gb }}</div>
                    </div>
                    <div style='position: absolute;left: 57%;width: 20%;text-align: center;top: 20%'>
                        <div style='color: rgba(123, 123, 123, 1);font-size: 13px'>省标</div>
                        <div style='font-size: 15px;margin-top: 10px'>{{ codeDataList[1].sb }}</div>
                    </div>
                    <div style='position: absolute;left: 75%;width: 20%;text-align: center;top: 20%;cursor: pointer'
                         @click='goxsbah'>
                        <img src='../../assets/xq.png' style='width: 20px'>
                        <div style='font-size: 12px;margin-top: 0px;color: rgba(64, 158, 255, 1)'>详情</div>
                    </div>
                </div>
            </div>
        </div>
        <div class='container margintop'>
            物料类型：
            <el-select v-model='name' filterable placeholder='请选择' style='width: 200px;'>
                <el-option v-if='switchHeadTab == "生产系统"' label='配方颗粒' value='配方颗粒'></el-option>
                <el-option v-if='switchHeadTab == "生产系统"' label='配方颗粒(颗粒)' value='配方颗粒(颗粒)'></el-option>
                <el-option v-if='switchHeadTab == "生产系统"' label='配方颗粒(浸膏粉)' value='配方颗粒(浸膏粉)'></el-option>
                <el-option v-if='switchHeadTab == "生产系统"' label='提取饮片' value='提取饮片'></el-option>
                <el-option v-if='switchHeadTab == "生产系统"' label='中药材' value='中药材'></el-option>
                <el-option v-if='switchHeadTab == "生产系统"' label='辅料' value='辅料'></el-option>
                <el-option v-if='switchHeadTab == "中药饮片"' label='中药饮片' value='中药饮片'></el-option>
                <el-option v-if='switchHeadTab == "中药饮片"' label='中药饮片(半成品)' value='中药饮片(半成品)'></el-option>
            </el-select>
            <el-date-picker
                style='margin-left:20px;'
                v-model='time'
                type='daterange'
                value-format='yyyy-MM-dd'
                start-placeholder='开始日期'
                end-placeholder='结束日期'
            >
            </el-date-picker>
            <el-input placeholder='请输入品种' v-model.trim='breedName' style='width: auto;margin-left: 20px'>
            </el-input>
            <el-button style='float: right;margin-right: 20px' @click='reset'>重置</el-button>
            <el-button type='primary' style='float: right;margin-right: 20px' @click='getdata'>查询</el-button>

        </div>

        <div>
            <div
                :style='{width:switchHeadTab=="中药饮片"?"100%":"55%",display:switchHeadTab=="中药饮片"?"flex":"inline-block"}'
                style='margin-top: 10px;vertical-align: middle;'>
                <div class='container'
                     :style='{width:switchHeadTab == "中药饮片"? "50%":"100%",marginRight:switchHeadTab=="中药饮片"?"10px":"0"}'
                     style='height: 250px;'>
                    <div class='leftlabel'></div>
                    <div class='labeltitle'>物料生产数据统计</div>
                    <el-button type='primary' style='float: right;margin-right: 20px' @click='golink'>详情</el-button>
                    <div id='histogram' style='width:100%;height:230px;'></div>
                </div>

                <div class='container' style='overflow: auto'
                     :style='{width:switchHeadTab == "中药饮片"? "50%":"100%",height:switchHeadTab=="中药饮片"?"250px":"320px",marginTop:switchHeadTab=="中药饮片"?"0":"10px"}'>
                    <div class='leftlabel'></div>
                    <div class='labeltitle'>生产历史数据</div>
                    <el-table
                        :data='tableData'
                        border
                        ref='multipleTable'
                        header-cell-class-name='table-header'
                        style='margin-top:20px;'
                    >
                        <el-table-column prop='ranking' label='序号'></el-table-column>
                        <el-table-column prop='breedName' label='品种名称'></el-table-column>
                        <el-table-column prop='totalNum' label='生产数量（kg）'></el-table-column>
                        <el-table-column prop='time' label='生产时间'></el-table-column>


                    </el-table>
                    <el-pagination layout='total, prev, pager, next, jumper' :page-size='5' :current-page.sync='page'
                                   @current-change='handleCurrentChange' :total='total'
                                   style='margin-top:20px'></el-pagination>
                </div>
            </div>
            <div style='margin-top: 10px;width: 37%;display: inline-block;margin-left: 70px;vertical-align: middle'
                 v-if='switchHeadTab == "生产系统"'>
                <div class='container' style='width: 100%;height: 250px;'>
                    <div class='leftlabel'></div>
                    <div class='labeltitle'>物料生产数据占比</div>
                    <el-radio-group v-model='standard' style='margin-top: 10px;display: block' @change='getpiedata'>
                        <el-radio-button label='0'>全部标准</el-radio-button>
                        <el-radio-button label='1'>国标</el-radio-button>
                        <el-radio-button label='2'>省标</el-radio-button>
                    </el-radio-group>
                    <div id='tjpie' style='width:100%;height:220px;display: inline-block;vertical-align: middle'></div>
                </div>
                <div class='container' style='width: 100%;height: 320px;margin-top: 10px'
                     v-if='switchHeadTab == "生产系统"'>
                    <div class='leftlabel'></div>
                    <div class='labeltitle'>各类别包装颗粒数量统计</div>
                    <div id='linetj' style='width:100%;height:270px;'></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { dateFormat } from '@/utils/time';
import {
    homegetallfactory,
    homegetproddata,
    homegetdata,
    homegetrankdata,
    homegetpointdata,
    homegetpiedata,
    complianceRate
} from '@/request/api';
import { getProd, getCodeData } from '../../request/api';
import bus from '@/components/common/bus';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            iconList: [
                { name: '配方颗粒', icon: require('@/assets/配方颗粒@2x.png'), unit: '万袋' },
                { name: '配方颗粒(颗粒)', icon: require('@/assets/配方颗粒.png'), unit: 'kg' },
                { name: '配方颗粒(浸膏粉)', icon: require('@/assets/浸膏粉@2x.png'), unit: 'kg' },
                { name: '提取饮片', icon: require('@/assets/提取饮片@2x.png'), unit: 'kg' },
                { name: '中药饮片', icon: require('@/assets/提取饮片@2x.png'), unit: 'kg' },
                { name: '中药饮片(半成品)', icon: require('@/assets/提取饮片@2x.png'), unit: 'kg' },
                { name: '中药材', icon: require('@/assets/ddddd1.png'), unit: 'kg' },
                { name: '辅料', icon: require('@/assets/fllog.png'), unit: 'kg' }
            ],
            selectTime: '',
            checkList: [],
            loading: false,
            codeDataList: [{}, {}],
            colorlist: ['color10', 'color11', 'color12', 'color13', 'color14', 'color15'],
            tableData: [],
            total: 0,
            list: '',
            activeName1: '',
            tjdata: {},
            pfkl: '',
            pfklkl: '',
            jgf: '',
            zyyp: '',
            zyc: '',
            fl: '',
            zyypnum: '',
            zycnum: '',
            flnum: '',
            gc60: '',
            gc70: '',
            sc60: '',
            sc70: '',
            name: '',
            time: [dateFormat(new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, new Date().getDate()), 'y-m-d'), dateFormat(new Date(), 'y-m-d')],
            datalist: '',
            breedName: '',
            page: 1,
            standard: 0,
            datelist: [],
            numlist: [],
            datelist1: [],
            c60list: [],
            c70list: [],
            c80list: [],
            c90list: [],
            pielist: [],
            namelist: [],
            pieNumlist: []
        };
    },
    computed: {
        ...mapState(['switchHeadTab'])
    },
    methods: {
        async timePickerChange() {
            if (this.selectTime) {
                let startTime = dateFormat(this.selectTime[0], 'y-m-d');
                let endTime = dateFormat(this.selectTime[1], 'y-m-d');
                let params = {
                    startTime,
                    endTime,
                    appType: this.switchHeadTab == '生产系统' ? '配方颗粒' : this.switchHeadTab
                };
                const res = await complianceRate(params);
                console.log(res);
                this.checkList = res.data;
                this.checkList.forEach(item => {
                    this.iconList.forEach(jack => {
                        if (item.materialType == jack.name) {
                            item.icon = jack.icon;
                            item.unit = jack.unit;
                        }
                    });

                });
            } else {
                this.fristTimePickerChange();
            }
        },
        async fristTimePickerChange() {
            let params = {
                appType: this.switchHeadTab == '生产系统' ? '配方颗粒' : this.switchHeadTab
            };
            const res = await complianceRate(params);
            this.checkList = res.data;
            this.checkList.forEach(item => {
                this.iconList.forEach(jack => {
                    if (item.materialType == jack.name) {
                        item.icon = jack.icon;
                        item.unit = jack.unit;
                    }
                });
            });
            console.log(this.checkList);

        },
        gossbah() {
            this.$router.push({
                path: '/systemmanagecome'
            });

        },
        goxsbah() {
            this.$router.push({
                path: '/systemmanagerecord'
            });
        },
        golink() {
            this.$router.push({
                path: 'link',
                query: { cid: this.activeName1 }
            });
        },

        getpiedata() {

            this.namelist = [];

            this.pieNumlist = [];
            if (this.standard == 0) {
                var standard1 = '';
            } else {
                standard1 = this.standard;
            }
            let data = {
                companyId: this.activeName1,
                startTime: this.time[0],
                endTime: this.time[1],
                standard: standard1
            };
            homegetpiedata(data).then((res) => {
                this.pielist = res.data.materialTypeList;
                for (let i = 0; i < this.pielist.length; i++) {
                    this.pielist[i].name = this.pielist[i].type;
                    this.namelist.push(this.pielist[i].name);
                    this.pieNumlist.push(this.pielist[i].value);
                }
                this.getpie();
            });
        },

        getpointdata() {
            let data = {
                companyId: this.activeName1,
                startTime: this.time[0],
                endTime: this.time[1]
            };
            homegetpointdata(data).then((res) => {
                var list = res.data;
                for (let i = 0; i < list.length; i++) {
                    var l = list[i];
                    for (const listKey in l) {
                        this.datelist1.push(listKey);
                        var key = l[listKey];
                        this.c60list.push(key[0].num);
                        this.c70list.push(key[1].num);
                        this.c80list.push(key[2].num);
                        this.c90list.push(key[3].num);
                    }
                }
                this.getline();

            });
        },
        getpie() {
            if (this.switchHeadTab == '中药饮片') return;
            var tjpie = document.getElementById('tjpie');
            var myChart = echarts.init(tjpie);
            var option = {
                grid: {
                    left: '0%',
                    right: '5%',
                    bottom: '5%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['中药材', '提取饮片', '辅料', '配方颗粒', '配方颗粒(浸膏粉)', '配方颗粒(颗粒)'],

                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.pieNumlist,
                        type: 'bar',
                        barWidth: 12,
                        color: '#409EFF'
                    }
                ]
                // tooltip:{
                //   trigger:'axis',
                //   formatter:function (params){
                //     var l = params[0]
                //     if(_self.breedName != ""){
                //       var str = "数量：" + l.value +'<br>'
                //           // console.log(_self.name)
                //           +'物料类型：'+_self.name+ '<br>'
                //           +'物料名称：'+_self.breedName+ '<br>'
                //     }else{
                //       var str = "数量：" + l.value +'<br>'
                //           // console.log(_self.name)
                //           +'物料类型：'+_self.name+ '<br>'
                //     }
                //
                //

                //
                //     return str
                //   }
                // }
            };


            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        getline() {
            if (this.switchHeadTab == '中药饮片') return;

            var linetj = document.getElementById('linetj');
            var myChart = echarts.init(linetj);
            var option = {
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '0%',
                    top: '12%',
                    containLabel: true
                },
                legend: {
                    data: ['c60', 'c70', 'c80', 'c90']
                },
                xAxis: {
                    type: 'category',
                    data: this.datelist1
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'c60',
                        data: this.c60list,
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: 'c70',
                        data: this.c70list,
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: 'c80',
                        data: this.c80list,
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: 'c90',
                        data: this.c90list,
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            this.$nextTick(() => {
                myChart.setOption(option);

            });
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getrankdata();
        },
        getrankdata() {
            let data = {
                companyId: this.activeName1,
                type: this.name,
                page: this.page,
                pageSize: 5,
                breedName: this.breedName,
                startTime: this.time[0],
                endTime: this.time[1]
            };
            homegetrankdata(data).then((res) => {
                // console.log(res.data.total)
                this.tableData = res.data.content;
                this.total = res.data.totalElements;
                for (let i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].ranking = (this.page - 1) * 5 + (i + 1);
                }
            });
        },

        gethistogram() {
            var histogram = document.getElementById('histogram');
            var myChart = echarts.init(histogram);
            var _self = this;
            // console.log(option)
            var option = {
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.datelist
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.numlist,
                        type: 'bar',
                        barWidth: 12,
                        color: '#409EFF'

                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        var l = params[0];
                        if (_self.breedName != '') {
                            var str = '数量：' + l.value + '<br>'
                                // console.log(_self.name)
                                + '物料类型：' + _self.name + '<br>'
                                + '物料名称：' + _self.breedName + '<br>';
                        } else {
                            var str = '数量：' + l.value + '<br>'
                                // console.log(_self.name)
                                + '物料类型：' + _self.name + '<br>';
                        }


                        // console.log(params)
                        // var percent;
                        //   // res.result.data[0].data.forEach((item,index) => {
                        //   //   if(indexs.value == item){
                        //   //     percent = index
                        //   //   }
                        //   // })
                        //   var str = ""
                        //   params.map((item,index)=>{
                        //     str = item
                        //   })

                        return str;
                    }
                }
            };
            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        reset() {
            this.breedName = '';
            this.name = '配方颗粒';
            this.gettime();
        },
        handleClick(e) {
            // console.log(e)
            this.activeName1 = e.name;
            this.datelist = [];
            this.numlist = [];
            this.datelist1 = [];
            this.c60list = [];
            this.c70list = [];
            this.c80list = [];
            this.c90list = [];
            this.getproddata();
            this.getdata();
            this.getrankdata();
            this.getpointdata();
            this.getpiedata();
            this.getdat1();
        },

        getdat1() {
            let system = this.switchHeadTab == '生产系统' ? '配方颗粒' : this.switchHeadTab;
            let query = `companyId=${this.activeName1}&appType=${system}`;
            getProd(query).then((res) => {
                this.datalist = res.data;
                for (let i = 0; i < this.datalist.length; i++) {
                    if (this.datalist[i].materialType == '配方颗粒') {
                        this.pfkl = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '配方颗粒(颗粒)') {
                        this.pfklkl = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '辅料') {
                        this.fl = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '提取饮片') {
                        this.zyyp = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '中药饮片') {
                        this.zyyp = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '中药材') {
                        this.zyc = this.datalist[i].totalNum;
                    }
                    if (this.datalist[i].materialType == '配方颗粒(浸膏粉)') {
                        this.jgf = this.datalist[i].totalNum;
                    }
                }
            });

            getCodeData(this.activeName1).then((res) => {
                this.codeDataList[0] = res.data[0];
                this.codeDataList[1] = res.data[1];
                this.loading = false;
            });

        },


        init() {
            homegetallfactory('').then((res) => {
                this.activeName1 = res.data[0].id;
                this.list = res.data;
                this.getproddata();
                this.getdata();
                this.getrankdata();
                this.getpointdata();
                this.getpiedata();
                this.getdat1();
                this.loading = true;
            });
        },
        getproddata() {
            homegetproddata(this.activeName1).then((res) => {
                this.tjdata = res.data;
                for (let i = 0; i < this.tjdata.length; i++) {

                    if (this.tjdata[i].materialType == '辅料') {
                        this.flnum = this.tjdata[i].num;
                    }
                    if (this.tjdata[i].materialType == '配方颗粒') {
                        this.zyypnum = this.tjdata[i].num;
                        this.gc60 = this.tjdata[i].C60;
                        this.gc70 = this.tjdata[i].C70;
                        this.sc60 = this.tjdata[i].C80;
                        this.sc70 = this.tjdata[i].C90;
                    }
                    if (this.tjdata[i].materialType == '中药材') {
                        this.zycnum = this.tjdata[i].num;
                    }

                }

            });
        },

        getdata() {
            this.datelist = [];
            this.numlist = [];

            let data = {
                companyId: this.activeName1,
                type: this.name,
                startTime: this.time[0],
                endTime: this.time[1],
                breedName: this.breedName
                // page:this.page,
                // pagesize:10
            };
            console.log(data);
            homegetdata(data).then((res) => {
                var list = res.data.histogram;
                for (var i = 0; i < list.length; i++) {
                    var l = list[i];
                    for (const listKey in l) {
                        this.datelist.push(listKey);
                        this.numlist.push(l[listKey]);
                    }
                }
                this.gethistogram();
                this.getrankdata();
            });
        },
        gettime() {
            var newtime = new Date();
            var startTime1 = this.getIncrease(newtime.getFullYear(), 4) + '-' + this.getIncrease(newtime.getMonth() + 1, 2) + '-' + this.getIncrease(newtime.getDate(), 2);
            var startTime = this.getIncrease(newtime.getFullYear(), 4) - 1 + '-' + this.getIncrease(newtime.getMonth() + 1, 2) + '-' + this.getIncrease(newtime.getDate(), 2);
            this.$set(this.time, 0, startTime);
            this.$set(this.time, 1, startTime1);
        },
        getIncrease: function(num, digit) {
            var increase = '';
            for (var i = 0; i < digit; i++) {
                increase += '0';
            }
            return (increase + num).slice(-digit);
        }
    },
    mounted() {
        this.init();
        this.fristTimePickerChange();
        this.name = this.switchHeadTab == '生产系统' ? '配方颗粒' : this.switchHeadTab;
        bus.$emit('showSystemPop', true);

    },
};
</script>


<style scoped lang='less'>
.color10 {
    background: #027CF6;
}

.color11 {
    background: #89D461;
}

.color12 {
    background: #10C8F5;
}

.color13 {
    background: #FC901A;
}

.color14 {
    background: #FAD337
}

.color15 {
    background: #00C8BB
}

.el-pagination {
    text-align: center;
}

.sjnum {
    position: absolute;
    top: 50px;
    left: 120px;
    color: #0C131B;
    font-weight: 600;
    font-size: 18px;
    font-family: DINPro-Medium, DINPro;
}

.sjtitle {
    position: absolute;
    top: 20px;
    left: 120px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4000);
}

.sjimg {
    width: 58px;
    position: absolute;
    top: 20px;
    left: 50px;
}

.borderrioght {
    border-right: 2px solid #F6F6F6;
}

.sjcontent {
    width: 99%;
    height: 100px;
    //background: red;
    margin-top: 10px;
    border-radius: 6px;
    border: 2px solid #F6F6F6;
}

.sjcontainer {
    width: 16.4%;
    height: 100%;
    position: relative;
    //line-height: 100%;
    //background: #00a854;
    display: inline-block;
}

.container {
    height: 200px;
}

.leftlabel {
    width: 6px;
    height: 20px;
    background: #409EFF;
    display: inline-block;
    vertical-align: middle;
}

.labeltitle {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.margintop {
    margin-top: 10px;
    height: 30px;
    padding: 10px 30px;
}
</style>
